<template>
  <el-row :gutter="20" class="filter-data">
    <el-col :span="8" class="filter-box">
      <div class="menu-wrap">
        <div class="menu-title">
          <span class="menu-title-text">已选源头表</span>
          <div></div>
        </div>
        <div class="menu-search">
          <el-input
            v-model="filterText"
            clearable
            size="small"
            placeholder="请输入过滤关键词"
            @input="filterMenu"
          ></el-input>
        </div>
        <div class="menu-container">
          <div v-for="(val, k) in filterInfoMap" :key="k">
            <div
              v-show="!val.hide"
              class="menu-item"
              :class="{
                active: val.label === curSelect.label,
              }"
              :title="val.label"
              @click="changeMenu(val)"
            >
              {{ val.label }}
            </div>
          </div>
        </div>
      </div>
    </el-col>
    <el-col :span="16" class="filter-box">
      <div class="rule-config">
        <h3 style="margin-bottom: 10px">【{{ curSelect.label }}】过滤条件</h3>
      </div>
      <div class="expression-input">
        <h3>表达式=</h3>
        <el-input
          v-model="curSelect.expression"
          :disabled="!curSelect.label"
          type="textarea"
        />
      </div>
      <el-table
        v-loading="loading"
        :data="columnData"
        :max-height="maxHeight"
        :cell-style="{ color: '#333333' }"
        :header-cell-style="{ background: '#F3F4F7', color: '#000000' }"
      >
        <el-table-column
          prop="columnName"
          label="字段名称"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="type"
          label="数据类型"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="comment"
          label="字段说明"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
      </el-table>
    </el-col>
  </el-row>
</template>
<script>
export default {
  name: "FilterData",
  props: {
    configInfo: {
      type: Object,
      default: () => {},
    },
    sourceTable: {
      type: Array,
      default: () => [],
    },
    sourceId: {
      type: [Number, String, null],
      default: null,
    },
    mappings: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    // 处理传入的过滤信息
    configInfo: {
      handler(val, oldVal) {
        this.$forceUpdate();
        if (val && typeof val === "object") {
          for (let k in val) {
            let table = k.split("^");
            if (!(table[0] in this.filterInfoMap)) {
              this.filterInfoMap[table[0]] = {
                id: table[1],
                label: table[0],
                expression: val[k],
              };
            }
          }
        }
      },
      immediate: true,
      deep: true,
    },
    // 处理源头表
    sourceTable: {
      handler(val, oldVal) {
        // this.filterInfoMap = {}; // 清空已选源头表
        if (Array.isArray(val) && val.length) {
          for (let item of val) {
            if (!(item in this.filterInfoMap)) {
              this.filterInfoMap[item] = {
                id: null,
                label: item,
                expression: null,
              };
            }
          }
        }
      },
      immediate: true,
      deep: true,
    },
    // 从模型映射数据中获取id
    mappings: {
      handler(val, oldVal) {
        if (val && typeof val === "object") {
          for (let k in val) {
            let table = k.split("^");
            if (table[0] in this.filterInfoMap) {
              this.filterInfoMap[table[0]].id = table[1];
            } else {
              this.filterInfoMap[table[0]] = {
                id: table[1],
                label: table[0],
                expression: null,
              };
            }
          }
        }
      },
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      filterText: null,
      filterInfoMap: {},
      curSelect: {},
      columnData: [],
      loading: false,
      maxHeight: window.innerHeight * 0.35,
    };
  },
  methods: {
    filterMenu(val) {
      for (let k in this.filterInfoMap) {
        if (
          this.filterInfoMap[k].label.toUpperCase().includes(val.toUpperCase())
        ) {
          this.filterInfoMap[k].hide = false;
        } else {
          this.filterInfoMap[k].hide = true;
        }
      }
    },
    changeMenu(menu) {
      // if (this.curSelect.label === menu.label) {
      //   this.curSelect = {};
      // } else {
      //   this.curSelect = menu;
      // }
      if (this.mappings && typeof this.mappings === "object") {
        for (let k in this.mappings) {
          let table = k.split("^");
          if (table[0] in this.filterInfoMap) {
            this.filterInfoMap[table[0]].id = table[1];
          } else {
            this.filterInfoMap[table[0]] = {
              id: table[1],
              label: table[0],
              expression: null,
            };
          }
        }
      }
      this.curSelect = menu;
      this.getColumnData({ sourceId: this.sourceId, tableName: menu.label });
    },
    // 查找字段信息
    getColumnData(params) {
      this.loading = true;
      this.$axios
        .get(this.$api.dataConnection.dataAggregation.getTableColumn, {
          params,
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.columnData = res.data.data;
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          console.error(err);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 用于父组件收集数据
    getData() {
      return new Promise((resolve, reject) => {
        const res = {};
        for (let k in this.filterInfoMap) {
          let item = this.filterInfoMap[k];
          if (item.id === null || item.id === undefined) {
            continue;
          }
          let key = `${k}^${item.id}`;
          if (item.expression) {
            res[key] = item.expression;
          }
        }
        resolve({ filterDataMap: res });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.filter-data {
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.filter-box {
  height: 100%;
}

.menu-wrap {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 100%;
}
.menu-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  .menu-title-text {
    border-left: 3px solid $--color-primary;
    padding-left: 5px;
    margin: 8px 0;
  }
}

.menu-container {
  flex: 1;
  padding: 10px 0;
  overflow-y: auto;
}

.menu-item {
  padding: 5px 10px;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  &.active,
  &.checked-all {
    background-color: #f1f4fd;
    color: $--color-primary;
  }
}

.expression-input {
  margin-bottom: 15px;
}
</style>
